<!-- 付款明细 -->
<template>
  <div class="table-page-search-wrapper">
    <!-- 条件查询 start -->
    <a-form layout="inline">
      <a-row :gutter="20">
        <a-col :md="6" :sm="24">
          <a-form-item :label="$t('all.autotext949')">
            <a-select
              v-model="queryParam.orgId"
              :placeholder="$t('all.autotext1348')"
              default-value=""
              allowClear
            >
              <a-select-option v-for="item in allCenterList" :key="item.id" :value="item.id">
                <a-tooltip :title="item.researchCenterNo + '-' + item.orgName">
                  {{ item.researchCenterNo }}-{{ item.orgName }}
                </a-tooltip>
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="6" :sm="24">
          <a-form-item :label="$t('all.autotext765')">
            <a-select
              v-model="queryParam.type"
              :placeholder="$t('all.autotext1348')"
              default-value=""
              allowClear
            >
              <a-select-option v-for="item in $const.SUBJECTANDREESA" :key="item.value" :value="item.value">
                {{
                  item.desc
                }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="6" :sm="24">
          <a-form-item :label="$t('all.autotext244')">
            <a-range-picker
              format="YYYY-MM-DD"
              :show-time="false"
              v-decorator="['range-time-picker']"
              v-model="dateArr"
              :allowClear="true"
              @change="event_changeCreateTime"
              style="width: 100%"
            ></a-range-picker>
          </a-form-item>
        </a-col>
        <a-col :md="6" :sm="24">
          <a-form-item :label="$t('all.autotext82')">
            <a-range-picker
              format="YYYY-MM-DD"
              :show-time="false"
              v-decorator="['range-time-picker']"
              v-model="datePayArr"
              :allowClear="true"
              @change="event_changePayTime"
              style="width: 100%"
            ></a-range-picker>
          </a-form-item>
        </a-col>
        <a-col :md="6" :sm="24">
          <a-form-model-item :label="$t('all.autotext1787')" prop="offline">
            <a-select v-model="queryParam.offline" :placeholder="$t('all.autotext1348')" allowClear>
              <a-select-option v-for="item in $const.OFFLINE_TYPE" :key="item.value" :value="item.value">
                {{ item.desc }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :md="6" :sm="12">
          <a-space>
            <a-button type="primary" @click="$refs.table.refresh(true)">{{ $t('all.autotext30') }}</a-button>
            <a-button @click="resetQueryParam">{{ $t('all.autotext340') }}</a-button>
            <a-button icon="export" @click="clickExport" v-if="$auth('PROJECT.PROJECT_PAY_EXPORT_V2')">{{ $t('all.autotext1014') }}</a-button>
          </a-space>
        </a-col>
      </a-row>
    </a-form>
    <!-- 条件查询 end -->
    <!-- 付款明细列表 -->
    <s-table
      ref="table"
      size="default"
      :row-key="record => record.id"
      :data="loadData"
      :scroll="{x: 'max-content'}"
    >
      <a-table-column :title="$t('all.autotext1156')" key="applyNo" data-index="applyNo" />
      <a-table-column :title="$t('all.autotext949')" key="researchCenterNo" data-index="researchCenterNo">
        <template slot-scope="text, record">
          {{ record.orgNo + ' - ' + record.orgName }}
        </template>
      </a-table-column>
      <a-table-column :title="$t('all.autotext1787')" key="offline" data-index="offline">
        <template slot-scope="text">
          {{ Number(text) | enumValueByKey($const.OFFLINE_TYPE) }}
        </template>
      </a-table-column>
      <a-table-column :title="$t('all.autotext765')" key="type" data-index="type">
        <template slot-scope="text">
          {{ text }}
        </template>
      </a-table-column>
      <a-table-column :title="$t('all.autotext1521')" key="createAccount" data-index="createAccount" />
      <a-table-column :title="$t('all.autotext1543')" key="serviceAmount" data-index="serviceAmount">
        <template slot-scope="text, record">
          ¥{{ record.serviceAmount }}
        </template>
      </a-table-column>
      <a-table-column :title="$t('all.autotext597')" key="bankNo" data-index="bankNo" />
      <a-table-column :title="$t('all.autotext867')" key="totalAmount" data-index="totalAmount" >
        <template slot-scope="text, record">
          ¥{{ record.totalAmount | formatAmount }}
        </template>
      </a-table-column>
      <a-table-column :title="$t('all.autotext244')" key="createTime" data-index="createTime">
        <template slot-scope="text, record">
          {{ record.createTime | moment() }}
        </template>
      </a-table-column>
      <a-table-column :title="$t('all.autotext82')" key="payTime" data-index="payTime">
        <template slot-scope="text, record">
          {{ record.payTime ? moment(record.payTime).format('YYYY-MM-DD HH:mm:ss') : '-' }}
        </template>
      </a-table-column>
      <a-table-column
        key="applyReason"
        :width="400"
        :title="$t('all.autotext550')"
        data-index="applyReason"
      >
        <template slot-scope="text">
          <span class="textover" :title="text">{{ text }}</span>
        </template>
      </a-table-column>
      <a-table-column key="now" :title="$t('all.autotext1466')" data-index="now" />
      <a-table-column :title="$t('all.autotext944')" key="payNo" data-index="payNo" />
      <a-table-column :title="$t('all.autotext187')" width="100px" fixed="right">
        <template slot-scope="record">
          <a @click="clickViewDetail(record)" v-if="$auth('PROJECT.PROJECT_PAY_DETAIL_V2')">{{ $t('all.autotext568') }}</a>
        </template>
      </a-table-column>
    </s-table>
    <div class="total-wrap">
      <a-space :size="40">
        <div class="total-space">{{ $t('all.autotext1016') }}:<span><em>¥</em>{{ (amountInfo.paid || 0).toFixed(2) }}</span></div>
        <div class="total-space">{{ $t('all.autotext1398') }}:<span><em>¥</em>{{ (amountInfo.listTopay || 0).toFixed(2) }}</span></div>
        <div class="total-space">{{ $t('all.autotext1255') }}:<span><em>¥</em>{{ (amountInfo.listCanUse || 0).toFixed(2) }}</span></div>
      </a-space>
    </div>
    <div class="total-wrap">
      <a-space :size="40">
        <div class="total-space">{{ $t('all.autotext1539') }}:<span><em>¥</em>{{ (amountInfo.studyListPaid || 0).toFixed(2) }}</span></div>
        <div class="total-space">{{ $t('all.autotext1541') }}:<span><em>¥</em>{{ (amountInfo.studyListToPay || 0).toFixed(2) }}</span></div>
        <div class="total-space">{{ $t('all.autotext1544') }}:<span><em>¥</em>{{ (amountInfo.studyListCanUse || 0).toFixed(2) }}</span></div>
      </a-space>
    </div>
    <div class="total-wrap">
      <a-space :size="40">
        <div class="total-space">{{ $t('all.autotext1540') }}:<span><em>¥</em>{{ (amountInfo.serverListPaid || 0).toFixed(2) }}</span></div>
        <div class="total-space">{{ $t('all.autotext1542') }}:<span><em>¥</em>{{ (amountInfo.serverListTopay || 0).toFixed(2) }}</span></div>
        <div class="total-space">{{ $t('all.autotext1545') }}:<span><em>¥</em>{{ (amountInfo.serverListCanUse || 0).toFixed(2) }}</span></div>
      </a-space>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { getPaymentList } from '@/api/project/finance'
import { getRecordExport } from '@/api/overview/bill'
import { buildPaginationObj } from '@/components/Table'
import { apiGetAllCenter } from '@api/cost/cost'
import { exportExcel } from '@/utils/util'
// import { mapGetters } from 'vuex'

export default {
  props: {
    total: {
      type: [Number, String],
      default: 0
    },
    datailId: {
      type: [Number, String],
      default: 0
    }
  },
  data () {
    return {
      moment,
      allCenterList: [], // 所有中心列表
      listType: [
        { status: 1, text: this.$t('all.autotext934') },
        { status: 2, text: this.$t('all.autotext407') },
        { status: 3, text: this.$t('all.autotext138') },
        { status: 4, text: this.$t('all.autotext1152') },
        { status: 5, text: this.$t('all.autotext300') }
      ],
      amountInfo: {},
      dynamicTitle: this.$t('all.autotext749'),
      queryParam: {},
      dateArr: [],
      datePayArr: [],
      loadData: parameter => {
        if (this.$auth('PROJECT.PROJECT_PAY_LIST_V2') && this.queryParam.proId) {
          return getPaymentList(Object.assign(parameter, { listAll: true }, this.queryParam))
            .then(res => {
              this.amountInfo = res
              this.$emit('billChange', res)
              return res.page
            })
            .catch(() => {})
        } else {
          return Promise.resolve(buildPaginationObj([]))
        }
      }
    }
  },
  // computed: {
  //   abNum () {
  //     return this.total - (this.amountInfo.listPaid + this.amountInfo.listTopay)
  //   }
  // },
  mounted () {
    this.getAllCenterList()
  },
  created () {
    this.queryParam.proId = this.datailId
  },
  methods: {
    // 获取所有中心下拉列表
    getAllCenterList () {
      apiGetAllCenter({ proId: this.queryParam.proId }).then(res => {
        this.allCenterList = res
      })
    },
    // 导出
    async clickExport () {
      const res = await getRecordExport({ ...this.queryParam, listAll: true })
      exportExcel(this.$t('all.autotext1004'), res.data)
    },
    // 时间选择回调
    event_changeCreateTime (value, dateString) {
      this.queryParam.bTime = dateString[0]
      this.queryParam.eTime = dateString[1]
    },
    event_changePayTime (value, dateString) {
      this.queryParam.bTimeForPayTime = dateString[0]
      this.queryParam.eTimeForPayTime = dateString[1]
    },
    // 点击重置按钮清空查询
    resetQueryParam () {
      this.dateArr = []
      this.datePayArr = []
      this.queryParam = { proId: this.datailId }
      this.$refs.table.refresh(true)
    },
    // 点击查看进入详情页
    clickViewDetail (record) {
      this.$router.push({ name: 'PaymentDetail', query: { ...record } })
    }
  }
}
</script>

<style scoped lang="less">
.total-wrap {
  margin-top: 20px;
  .total-space{
    width:300px;
    em{
      font-style: normal;
      font-size: 16px;
    }
  }
  .total-space>span {
    font-size: 18px;
    font-weight: bold;
    margin-left: 8px;
  }
}
.textover {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
